<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>天气查询</title>
    <link rel="stylesheet" href="weather.css">
</head>

<body>
    <div id="app">
        <div class="logo">
            <img src="img/logo.png" alt="">
        </div>
        <div class="nav">
            <input type="text" @keyup.enter="searchWeather" v-model="city" class="navv" placeholder="请输入要查询的天气">
            <button class="btn">搜索</button>
        </div>
        <div class="wenzhi">
            <a href="javascript:;" @click="changeCity('北京')">北京</a>
            <a href="javascript:;" @click="changeCity('上海')">上海</a>
            <a href="javascript:;" @click="changeCity('广州')">广州</a>
            <a href="javascript:;" @click="changeCity('深圳')">深圳</a>
        </div>
        <ul class="xianshi">
            <li v-for="item in weatherList">
                <h3>{{item.type}}</h3>
                <h4>{{item.low}}~{{item.high}}</h4>
                <h5>{{item.date}}</h5>
            </li>
        </ul>

    </div>
    <!-- 官网提供的 axios 在线地址 -->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <!-- 自己的js -->
    <script src="./js/main.js"></script>
</body>

</html>